export function generic() {
  const serch = document.querySelector('.serch>button>i');
  //获取输入表单
  const form = document.querySelector('form');
  //获取关闭按钮
  const close = document.querySelector('#close');
  //获取搜索输入框
  const ipt = document.querySelector('form>input');
  const nav = document.querySelectorAll('.nav>li>a');
  //获取对应导航栏的盒子
  const menu = document.querySelectorAll('.menu');
  const bodyEl = document.body;
  //搜索按钮添加点击监听
  serch.addEventListener('click', function () {
    serch.style.display = 'none'; // 隐藏搜索按钮图标
    form.style.display = 'block'; // 显示搜索表单
  });
  // 给关闭按钮添加点击监听
  close.addEventListener('click', function () {
    form.style.display = 'none'; // 隐藏搜索表单
    serch.style.display = 'block'; // 显示搜索按钮图标
  });
  // 给搜索输入框添加input事件监听
  ipt.addEventListener('input', function (e) {
    const serchipt = document.querySelector('#serchipt');
    let length = e.target.value.length;
    if (length >= 3) {
      // 如果输入文字超过3个显示搜索输入提示框
      serchipt.style.display = 'block';
    } else {
      // 隐藏搜索输入提示框
      serchipt.style.display = 'none';
    }
  });
  // 给导航栏添加点击监听
  nav.forEach((ele, index) => {
    ele.addEventListener('click', function (e) {
      e.preventDefault();
      // 遍历所有导航栏和对应菜单，移除其active类名
      for (let i = 0; i < nav.length - 1; i++) {
        nav[i].classList.remove('navactive');
        menu[i].classList.remove('menuactive');
      }
      // 给当前导航栏和对应菜单添加active类名
      nav[index].classList.add('navactive');
      menu[index].classList.add('menuactive');
    });
  });
  bodyEl.addEventListener('click', function (e) {
    e.stopPropagation();
    menu.forEach((ele) => {
      if (ele.contains(e.target)) {
        ele.style.opacity = Number('0');
      }
    });
  });
}
